<template>
  <a-modal v-model:open="open" title="研判" :footer="null" width="420px">
    <a-form ref="formRef" :model="formState" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
      <a-form-item label="研判标签" name="type" :rules="[{ required: true, message: '请选择研判标签!' }]">
        <a-cascader v-model:value="formState.type" style="width: 100%" multiple max-tag-count="responsive"
          :options="options" placeholder="请选择研判标签" :field-names="{ label: 'mc', value: 'mc', children: 'children', }"
          :show-checked-strategy="Cascader.SHOW_CHILD"></a-cascader>
      </a-form-item>
      <a-form-item label="研判依据">
        <a-textarea placeholder="500个字数以内" :maxlength="500" v-model:value="formState.desc" />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 24, offset: 0 }" style="text-align:right;">
        <a-button type="primary" @click="onSubmit">确定</a-button>
        <a-button style="margin-left: 10px" @click="handleCancel">取消</a-button>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import { ref, onMounted, reactive, toRaw } from 'vue'
import { Cascader } from 'ant-design-vue';
// import { tagTreeUrl } from '@/api/ZAApi.js'
// 接受父组件传值
const props = defineProps({
  idCard: {
    type: String,
    default: ""
  },
  nodeId: {
    type: String,
    default: ""
  },
})
const mountId = ref("")
//初始化获取标签数据
onMounted(() => {
  mountId.value = props.nodeId
  getOptions()
})
// 获取当前时间
const getTime = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day = String(now.getDate()).padStart(2, '0');
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');
  const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  return formattedTime
}
const emit = defineEmits(['ok', 'cancel'])
const open = ref(false)
const formRef = ref()
const formState = reactive({
  sfzh: props.idCard,
  type: [],
  desc: '',
  time: getTime()
})
// 提交弹窗数据
const onSubmit = () => {
  formRef.value.validate()
    .then(() => {
      formState.time = getTime()
      const rawFormData = toRaw(formState);
      emit('ok', rawFormData)
      window.postMessage({ action: 'addNode', body: { type: "ypxx", style: { width: "400px" }, data: { AssessFormState: rawFormData, title: "人员研判" }, mountId: mountId.value } }, '*');
      formState.type = []
      formState.desc = ''
      open.value = false
    })
    .catch(error => {
      console.log('校验失败:', error)
    })
}
//关闭弹窗
const handleCancel = () => {
  formRef.value.resetFields()
  emit('cancel')
  formState.type = []
  formState.desc = ''
  open.value = false
}
// 研判列表数据
const options = ref([])
// 请求标签数据
const getOptions = async () => {
  tagTreeUrl({ elementType: 0 }).then((res) => {
    if (res.code == 200) {
      options.value = JSON.parse(res.result).data
      console.log(options.value);
    } else {
      message.error(res.msg);
    }
  }).catch((err) => {
    message.error(err);
  });
}
defineExpose({
  open
})
</script>
